<template>
	<div class="workflow-tool">
		<div class="pl15">{{ setToolTitle }}</div>
		<div class="workflow-tool-right">
			<el-tooltip class="box-item" effect="light" v-for="(v, k) in toolList" :key="k" :content="v.title" placement="bottom" >
				<div class="workflow-tool-icon" @click="onToolClick(v.fnName)">
					<SvgIcon :name="v.icon" />
				</div>
			</el-tooltip>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, computed, reactive, toRefs } from 'vue';
export default defineComponent({
	name: 'workable/editor/tool',
	props: {
		// 绑定值
		model: {
			type: Object,
			default: () => {},
		},
	},
	setup(props, { emit }) {
		const state = reactive({
			toolList: [
				{ icon: 'ele-Help', title: '帮助', fnName: 'help' },
				// { icon: 'ele-Download', title: '下载', fnName: 'download' },
				{ icon: 'ele-VideoPlay', title: '运行', fnName: 'run'},
				{ icon: 'ele-Check', title: '校验', fnName: 'verify' },
				{ icon: 'ele-Finished', title: '保存', fnName: 'submit' },
				{ icon: 'ele-Document', title: '详情', fnName: 'detail' },
				// { icon: 'ele-DocumentCopy', title: '复制', fnName: 'copy' },
				{ icon: 'ele-Delete', title: '删除', fnName: 'del' },
				{ icon: 'ele-FullScreen', title: '全屏', fnName: 'fullscreen' },
				{ icon: 'ele-Close', title: '关闭', fnName: 'close' },
			],
		});
		// 设置 tool 标题
		const setToolTitle = computed(() => {
			return props.model.taskName;
		});
		// 顶部工具栏
		const onToolClick = (fnName: string) => {
			emit('tool', fnName);
		};
		return {
			setToolTitle,
			onToolClick,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.workflow-tool {
	height: 35px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
	color: var(--el-text-color-primary);
	.workflow-tool-right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
	&-icon {
		padding: 0 10px;
		cursor: pointer;
		color: var(--next-bg-topBarColor);
		height: 35px;
		line-height: 35px;
		display: flex;
		align-items: center;
		&:hover {
			background: rgba(0, 0, 0, 0.04);
			i {
				display: inline-block;
				animation: logoAnimation 0.3s ease-in-out;
			}
		}
	}
}
</style>
